<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>太阳能发电系统实时监控 - 天气</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/weather.css">
  <!-- 引入字体图标库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
</head>
<body>
  <div id="app">
    <!-- 主容器 -->
    <div class="solar-app">
      <!-- 顶部导航栏 -->
      <header class="app-header">
        <div class="app-title">
          <!-- <img src="assets/透明底Logo.png" alt="太阳能发电监控系统" class="app-logo"> -->
          <h1>独立式家庭供电自发自用系统</h1>
        </div>
        <div class="last-update">最后更新: {{ lastUpdateTime }}</div>
      </header>

      <!-- 导航菜单 -->
      <div class="nav-menu">
        <div class="nav-item" data-page="index">
          <i class="fas fa-tachometer-alt"></i>
          <div>仪表盘</div>
        </div>
        <div class="nav-item" data-page="weather">
          <i class="fas fa-cloud-sun"></i>
          <div>天气</div>
        </div>
        <div class="nav-item" data-page="statistics">
          <i class="fas fa-chart-bar"></i>
          <div>统计</div>
        </div>
        <div class="nav-item" data-page="settings">
          <i class="fas fa-cog"></i>
          <div>设置</div>
        </div>
      </div>

      <!-- 地理与天气服务 -->
      <section class="card">
        <div class="location">
          <i class="fas fa-map-marker-alt"></i>
          <span>{{ weatherData.location }}</span>
          <button class="refresh-btn" @click="refreshWeather" title="刷新天气数据">
            <i class="fas fa-sync-alt"></i>
          </button>
        </div>

        <div class="weather-card">
          <div class="weather-main">
            <div class="weather-main-left">
              <div class="weather-icon">
                <i :class="weatherIconClass"></i>
              </div>
              <div class="weather-temp">
                <div>
                  <span class="temp-value">{{ weatherData.temperature }}</span>
                  <span class="temp-unit">°C</span>
                </div>
                <div class="weather-desc">{{ weatherDescription }}</div>
              </div>
            </div>
            <div class="weather-main-right">
              <div class="weather-day">{{ dayOfWeek }}</div>
              <div class="weather-date">{{ currentDate }}</div>
            </div>
          </div>

          <div class="weather-details">
            <div class="detail-item">
              <i class="fas fa-tint"></i>
              <div class="detail-info">
                <div class="detail-label">湿度</div>
                <div class="detail-value">{{ weatherData.humidity }}%</div>
              </div>
            </div>
            <div class="detail-item">
              <i class="fas fa-wind"></i>
              <div class="detail-info">
                <div class="detail-label">风速</div>
                <div class="detail-value">{{ weatherData.windSpeed }}m/s</div>
              </div>
            </div>
            <div class="detail-item">
              <i class="fas fa-cloud-rain"></i>
              <div class="detail-info">
                <div class="detail-label">降雨概率</div>
                <div class="detail-value">{{ weatherData.rainChance }}% ({{ rainChanceStatus }})</div>
              </div>
            </div>
            <div class="detail-item">
              <i class="fas fa-sun"></i>
              <div class="detail-info">
                <div class="detail-label">光照强度</div>
                <div class="detail-value">{{ weatherData.lightIntensity }}%</div>
              </div>
            </div>
          </div>
        </div>

        <div class="light-intensity">
          <h3>光照强度影响</h3>
          <div class="intensity-meter">
            <div class="meter-fill" :style="{ width: weatherData.lightIntensity + '%' }"></div>
          </div>
          <p class="intensity-info">当前光强对发电效率影响: {{ weatherData.lightEfficiencyText }}</p>
        </div>

        <h3 class="forecast-title">天气预报</h3>
        <div class="forecast-list">
          <div class="forecast-item" v-for="(item, index) in weatherData.forecast" :key="index">
            <div class="forecast-day">{{ item.day }}</div>
            <div class="forecast-icon">
              <i :class="getForecastIcon(item.condition)"></i>
            </div>
            <div class="forecast-temp">{{ item.temp }}°C</div>
            <div class="forecast-desc">{{ item.desc }}</div>
          </div>
        </div>
      </section>
    </div>

    <!-- 系统报警弹窗 -->
    <div class="alert-overlay" v-if="showAlert">
      <div class="alert-content">
        <div class="alert-icon">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h3>系统报警</h3>
        <p>{{ alertMessage }}</p>
        <button class="alert-btn" @click="acknowledgeAlert" title="确认报警">我知道了</button>
      </div>
    </div>
  </div>

  <!-- 引入必要的JS库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/common.js"></script>
  <script src="js/weather.js"></script>
</body>
</html>